<template>
	<view class="main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="加载中"></u-loading-page>
		<view v-if="!loadding" class="mains">
			<u-sticky>
				<view class="search">
					<view class="searchs">
						<u-search placeholder="商户名称|SN" bgColor="#ffffff" :showAction="false" v-model="keyword"
							@search="search"></u-search>
					</view>
					<view class="product" @click="show = true">
						<u-icon name="list" color="#409EFF" size="26"></u-icon>
					</view>
				</view>
			</u-sticky>
			<view class="lists" v-if="data.length>0">
				<view class="items" v-for="(item,index) in data" :key="index">
					<view class="top">
						<view class="lefts">
							<view class="names" @click="info(item)">
								{{item.merchant_name}}
							</view>
							<view v-if="item.merchants" class="sn" @click="info(item)" style="margin-bottom: 10rpx;">
								{{item.merchants.name}}
							</view>
							<view class="sn" @click="info(item)">
								{{item.sn}}
							</view>
						</view>
						<view class="rights">
							<view class="remarks" @click="setRemark(item)">
								备注
							</view>
							<view class="icons" @click="info(item)">
								<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="total">
							<view class="nums">
								{{item.total.nowMonthTotal}}
							</view>
							<view class="title">
								本月交易(元)
							</view>
						</view>
						<view class="total">
							<view class="nums">
								{{item.total.prevMonthTotal}}
							</view>
							<view class="title">
								上月交易(元)
							</view>
						</view>
						<view class="total">
							<view class="nums">
								{{item.total.allTotal}}
							</view>
							<view class="title">
								累计交易(元)
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
			</u-empty>
			<u-picker :show="show" :columns="columns" keyName="title" @confirm="selectProduct"
				@cancel="show = false"></u-picker>
			<u-overlay :show="remarkShow">
				<view class="rate-main">
					<view class="main">
						<view class="rate-close">
							<u-icon name="close" @click="remarkShow = false"></u-icon>
						</view>
						<view class="rate-items border-bottom">
							<view class="lefts">
								<text>终端SN：</text>
								<text>{{sn}}</text>
							</view>
							<view class="rights"></view>
						</view>
						<view class="rate-items border-bottom">
							<view class="lefts">
								<text>商户编号：</text>
								<text>{{merchant_id}}</text>
							</view>
							<view class="rights"></view>
						</view>
						<view class="rate-items border-bottom">
							<view class="lefts">
								<text>商户名称：</text>
								<text>{{merchant_name}}</text>
							</view>
							<view class="rights"></view>
						</view>
						<view class="rate-remark">
							<u--textarea v-model="remarks" placeholder="请输入备注内容"></u--textarea>
						</view>
						<view class="btn" @click="temRateClick">
							<text>提交</text>
						</view>
					</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				show: false,
				remarkShow: false,
				columns: [],
				keyword: '',
				remarks: '',
				data: [],
				type: 1,
				page: 1,
				pageSize: 10,
				bottom: true,
				product_id: '',
				merchant_id: '',
				merchant_name: '',
				sn: '',
			}
		},
		//上拉加载
		onReachBottom() {
			if (this.bottom == true) {
				this.page += 1
				this.loadData()
			}
		},
		onLoad() {
			this.loadData()
			this.getProduct()
		},
		methods: {
			// 加载数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyMerchantList',
					data: {
						type: this.type,
						page: this.page,
						product_id: this.product_id,
						page_size: this.pageSize,
						keyword: this.keyword,
					}
				});
				uni.hideLoading()
				this.loadding = false
				if (res.code == 200) {
					if (res.data !== undefined && res.data !== null && res.data.length >
						0) {
						if (this.page == 1) {
							this.data = res.data
						} else {
							this.data = [...this.data, ...res.data]
						}
					} else {
						this.bottom = false
					}
				}
			},
			// 搜索
			search() {
				this.page = 1
				this.bottom = true
				this.data = []
				this.loadData()
			},
			// 详情
			info(item) {
				uni.navigateTo({
					url: '/pages/hzy/client/detail?sn=' + item.sn
				})
			},
			// 获取产品
			async getProduct() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyProduct'
				});
				if (res.code == 200) {
					this.columns = [res.data]
				}
			},
			// 选择产品
			selectProduct(e) {
				this.product_id = e.value[0].id
				this.page = 1
				this.bottom = true
				this.data = []
				this.loadData()
				this.show = false
			},
			// 设置备注
			setRemark(item) {
				this.remarks = item.remarks
				this.merchant_id = item.merchant_id
				this.sn = item.sn
				this.merchant_name = item.merchant_name
				this.remarkShow = true
			},
			// 保存备注
			async temRateClick() {
				var _this = this
				if (this.remarks === '') {
					uni.showToast({
						title: '请输入备注内容!',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/hzyTerminalRemarkEdit',
					data: {
						sn: this.sn,
						remarks: this.remarks
					}
				});
				this.remarkShow = false
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 200) {
					setTimeout(function() {
						_this.loadData()
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F6FC;
	}

	.main {

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #F2F6FC;
			padding: 30rpx;

			.searchs {
				width: 90%;
			}
		}

		.lists {
			margin: 0 30rpx 30rpx 30rpx;

			.items {
				margin-bottom: 30rpx;
				background-color: #ffffff;
				border-radius: 16rpx;

				.top {
					padding: 30rpx;
					border-bottom: 1px solid #F2F6FC;
					display: flex;
					justify-content: space-between;

					.lefts {
						width: 80%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;

						.names {
							padding-bottom: 20rpx;
						}

						.sn {
							font-size: 28rpx;
							color: #82848a;
						}
					}

					.rights {
						align-items: center;

						.remarks {
							position: relative;
							color: #409EFF;
							padding: 4rpx 30rpx;
							border: 1rpx solid #409EFF;
							border-radius: 50rpx;
							font-size: 26rpx;
						}

						.icons {
							padding-top: 20rpx;
							display: flex;
							justify-content: flex-end;
						}
					}
				}

				.bottom {
					padding: 30rpx;
					display: flex;
					justify-content: space-around;
					text-align: center;

					.nums {
						font-size: 24rpx;
					}

					.title {
						font-size: 28rpx;
					}
				}
			}
		}

		.rate-main {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.main {
				width: 80%;
				background-color: #ffffff;
				border-radius: 16rpx;
				padding: 30rpx;

				.rate-close {
					display: flex;
					justify-content: flex-end;
					padding-bottom: 20rpx;
				}

				.rate-items {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.rights {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						text {
							color: #82848a;
							font-size: 28rpx;
							padding-right: 10rpx;
						}
					}
				}

				.rate-remark {
					padding-top: 30rpx;
				}

				.border-bottom {
					border-bottom: 1px solid #f4f4f5;
				}

				.btn {
					background-color: #2979ff;
					color: #ffffff;
					font-size: 36rpx;
					padding: 30rpx;
					border-radius: 20rpx;
					text-align: center;
					margin-top: 30rpx;
				}
			}
		}
	}
</style>